<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
  <div class="pane">
    <p @click="replay">Replay</p>
  </div>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import {ref} from "vue";

export default {
  name: "AddAnimatedMarker.component",
  components: {Maptalks},
  setup() {

    const animate = () => {
      bars[0].animate(
          {
            "symbol": {
              "markerHeight": 82
            }
          },
          {
            "duration": 1000
          }
      );
      bars[1].animate(
          {
            "symbol": {
              "markerHeight": 197
            }
          },
          {
            "duration": 1000
          }
      );
      bars[2].animate(
          {
            "symbol": {
              "markerHeight": 154
            }
          },
          {
            "duration": 1000
          }
      );
    }
    const reset = () => {
      bars[0].updateSymbol({
        "markerHeight": 33
      });
      bars[1].updateSymbol({
        "markerHeight": 47
      });
      bars[2].updateSymbol({
        "markerHeight": 79
      });
    }

    let bars = ref(null)
    const getBars = (center) => {

      let bar1 = new maptalks.Marker(
          center.add(-0.012, -0.002),
          {
            "symbol": {
              "markerType": "bar",
              "markerWidth": 48,
              "markerHeight": 33,
              "markerFill": "rgb(135,196,240)",
              "markerLineWidth": 2,
              "markerLineColor": "#fff"
            }
          }
      );

      let bar2 = new maptalks.Marker(
          center.add(-0.004, -0.002),
          {
            "symbol": {
              "markerType": "bar",
              "markerWidth": 48,
              "markerHeight": 47,
              "markerFill": "rgb(216,115,149)",
              "markerLineWidth": 2,
              "markerLineColor": "#fff"
            }
          }
      );

      let bar3 = new maptalks.Marker(
          center.add(0.004, -0.002),
          {
            "symbol": {
              "markerType": "bar",
              "markerWidth": 48,
              "markerHeight": 79,
              "markerFill": "#1bbc9b",
              "markerLineWidth": 2,
              "markerLineColor": "#fff"
            }
          }
      );

      return [bar1, bar2, bar3];
    }

    const replay = () => {
      reset();
      animate();
    }

    let mapOnLoadCB = (map) => {
      let center = map.getCenter();
      bars.value = getBars(center);
      new maptalks.VectorLayer(MapLayerConst.MAP_MARKER_ANIMATION_LAYER).addGeometry(bars.value).addTo(map);

      replay();
    };

    return {
      mapOnLoadCB,
      replay
    }
  }
}
</script>

<style scoped lang="less">
.pane {
  background: #34495e;
  line-height: 28px;
  color: #fff;
  z-index: 10;
  position: absolute;
  top: 20px;
  right: 20px;

  p {
    cursor: pointer;
    display: block;
    color: #fff;
    text-align: left;
    padding: 0 10px;
    min-width: 28px;
    min-height: 28px;
    float: left
  }
}
</style>
